<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs>
    <div class="field-box">
      <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
        <i class="el-icon-link" />
      </a>
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form
          v-show="currentTab === 'field' && showField"
          size="small"
          label-width="90px"
        >
          <el-form-item v-if="activeData.__config__.changeTag" label="组件类型">
            <el-select
              v-model="activeData.__config__.tagIcon"
              placeholder="请选择组件类型"
              :style="{ width: '100%' }"
              @change="tagChange"
            >
              <el-option-group
                v-for="group in tagList"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.__config__.label"
                  :label="item.__config__.label"
                  :value="item.__config__.tagIcon"
                >
                  <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />
                  <span> {{ item.__config__.label }}</span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.__vModel__ !== undefined" label="字段名">
            <el-select
              v-model="activeData.__vModel__"
              placeholder="请选择"
              clearable
              allow-create
              filterable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              >
                <span style="float: left">{{ item.columnName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.columnComment
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.__vModel__ !== undefined"
            label="字段名"
          >
            <el-select
              v-model="activeData.__config__.__vModel__"
              placeholder="请选择"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              >
                <span style="float: left">{{ item.columnName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.columnComment
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.componentName !== undefined"
            label="组件名"
          >
            {{ activeData.__config__.componentName }}
          </el-form-item>
          <template v-if="activeData.__config__.tag == 'tree-select-item'">
            <el-form-item label="地区类型">
              <el-select v-model="activeData.selectLevel" placeholder="地区类型">
                <el-option
                  v-for="item in [
                    { label: '省选择器', value: 1 },
                    { label: '市选择器', value: 2 },
                    { label: '区选择器', value: 3 },
                    { label: '乡选择器', value: 4 },
                    { label: '村选择器', value: 5 },
                    { label: '户籍地址', value: 6 },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="表单提示">
              <el-input
                v-model="activeData.selectConfig.placeholder"
                placeholder="请输入表单提示"
              />
            </el-form-item>
          </template>
          <template v-if="activeData.__config__.tag == 'sz-upload'">
            <el-form-item label="上传提示">
              <el-input v-model="activeData.uploadTip" placeholder="请输入上传提示" />
            </el-form-item>
          </template>
          <el-form-item v-if="activeData.__config__.label !== undefined" label="标题">
            <el-input
              v-model="activeData.__config__.label"
              placeholder="请输入标题"
              @input="changeRenderKey"
            />
          </el-form-item>
          <el-form-item v-if="activeData.headerTitle !== undefined" label="子项标题">
            <el-input v-model="activeData.headerTitle" placeholder="请输入子项标题" />
          </el-form-item>
          <el-form-item v-if="activeData.limitItem !== undefined" label="限制数量">
            <el-input-number
              v-model="activeData.limitItem"
              placeholder="请输入限制数量"
            />
          </el-form-item>
          <el-form-item v-if="activeData.limit !== undefined" label="限制数量">
            <el-input-number v-model="activeData.limit" placeholder="请输入限制数量" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.align !== undefined" label="对齐方式">
            <el-input
              v-model="activeData.__config__.align"
              placeholder="请输入对齐方式"
            />
          </el-form-item>
          <el-form-item v-if="activeData.title !== undefined" label="弹框标题">
            <el-input v-model="activeData.title" placeholder="请输入弹框标题" />
          </el-form-item>
          <el-form-item v-if="activeData.width !== undefined" label="弹框宽度">
            <el-input v-model="activeData.width" placeholder="请输入弹框宽度" />
          </el-form-item>
          <el-form-item v-if="activeData.btnLabel !== undefined" label="按钮文字">
            <el-input v-model="activeData.btnLabel" placeholder="请输入按钮文字" />
          </el-form-item>
          <el-form-item v-if="activeData.businessKey !== undefined" label="业务key">
            <el-input v-model="activeData.businessKey" placeholder="请输入业务key" />
          </el-form-item>
          <el-form-item v-if="activeData.busType !== undefined" label="业务类型">
            <el-input v-model="activeData.busType" placeholder="请输入业务类型" />
          </el-form-item>
          <el-form-item v-if="activeData.selectType !== undefined" label="选择类型">
            <el-input
              v-model="activeData.selectType"
              placeholder="0-部门/工作组/用户，1-用户，2-部门/工作组"
            />
            <span class="item_tip"> 0-部门/工作组/用户，1-用户，2-部门/工作组 </span>
          </el-form-item>
          <el-form-item v-if="activeData.containUser !== undefined" label="是否包含用户">
            <el-input-number
              :max="1"
              :min="0"
              v-model="activeData.containUser"
              placeholder="请输入（0 不含，1包含）"
            />
          </el-form-item>
          <el-form-item v-if="activeData.placeholder !== undefined" label="占位提示">
            <el-input
              v-model="activeData.placeholder"
              placeholder="请输入占位提示"
              @input="changeRenderKey"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData['start-placeholder'] !== undefined"
            label="开始占位"
          >
            <el-input
              v-model="activeData['start-placeholder']"
              placeholder="请输入占位提示"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData['end-placeholder'] !== undefined"
            label="结束占位"
          >
            <el-input
              v-model="activeData['end-placeholder']"
              placeholder="请输入占位提示"
            />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.span !== undefined" label="表单栅格">
            <el-slider
              v-model="activeData.__config__.span"
              :max="24"
              :min="1"
              :marks="{ 12: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.layout === 'rowFormItem' &&
              activeData.gutter !== undefined
            "
            label="栅格间隔"
          >
            <el-input-number
              v-model="activeData.gutter"
              :min="0"
              placeholder="栅格间隔"
            />
          </el-form-item>
          <el-form-item
            v-if="
              (activeData.__config__.layout === 'rowFormItem' ||
                activeData.__config__.layout === 'szFormItem') &&
              activeData.type !== undefined
            "
            label="布局模式"
          >
            <el-radio-group v-model="activeData.type">
              <el-radio-button label="default" />
              <el-radio-button label="flex" />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.layout === 'tdFormItem'"
            label="行合并"
          >
            <el-input v-model="activeData.__config__.rowspan" placeholder="请输入行数" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.layout === 'tdFormItem'"
            label="列合并"
          >
            <el-input v-model="activeData.__config__.colspan" placeholder="请输入列数" />
          </el-form-item>
          <el-form-item
            v-if="activeData.justify !== undefined && activeData.type === 'flex'"
            label="水平排列"
          >
            <el-select
              v-model="activeData.justify"
              placeholder="请选择水平排列"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in justifyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.align !== undefined && activeData.type === 'flex'"
            label="垂直排列"
          >
            <el-radio-group v-model="activeData.align">
              <el-radio-button label="top" />
              <el-radio-button label="middle" />
              <el-radio-button label="bottom" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="activeData.__config__.labelPosition">
              <el-radio-button label="left"> 左对齐 </el-radio-button>
              <el-radio-button label="right"> 右对齐 </el-radio-button>
              <el-radio-button label="top"> 顶部对齐 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.labelWidth !== undefined"
            label="标签宽度"
          >
            <el-input
              v-model.number="activeData.__config__.labelWidth"
              type="number"
              placeholder="请输入标签宽度"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData.style && activeData.style.width !== undefined"
            label="组件宽度"
          >
            <el-input
              v-model="activeData.style.width"
              placeholder="请输入组件宽度"
              clearable
            />
          </el-form-item>
          <el-form-item v-if="activeData.__vModel__ !== undefined" label="默认值">
            <el-input
              :value="setDefaultValue(activeData.__config__.defaultValue)"
              placeholder="请输入默认值"
              @input="onDefaultValueInput"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-checkbox-group'"
            label="至少应选"
          >
            <el-input-number
              :value="activeData.min"
              :min="0"
              placeholder="至少应选"
              @input="$set(activeData, 'min', $event ? $event : undefined)"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-checkbox-group'"
            label="最多可选"
          >
            <el-input-number
              :value="activeData.max"
              :min="0"
              placeholder="最多可选"
              @input="$set(activeData, 'max', $event ? $event : undefined)"
            />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'tag-input'" label="签名类型">
            <el-checkbox-group
              v-model="activeData.__config__.tagType"
              @change="handleCheckedTagTypeChange"
            >
              <el-checkbox v-for="item in tagTypes" :label="item.key" :key="item.key">{{
                item.name
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            v-if="activeData.__slot__ && activeData.__slot__.prepend !== undefined"
            label="前缀"
          >
            <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__slot__ && activeData.__slot__.append !== undefined"
            label="后缀"
          >
            <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
          </el-form-item>
          <el-form-item v-if="activeData['prefix-icon'] !== undefined" label="前图标">
            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
              <el-button
                slot="append"
                icon="el-icon-thumb"
                @click="openIconsDialog('prefix-icon')"
              >
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
              <el-button
                slot="append"
                icon="el-icon-thumb"
                @click="openIconsDialog('suffix-icon')"
              >
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="
              activeData['icon'] !== undefined &&
              activeData.__config__.tag === 'el-button'
            "
            label="按钮图标"
          >
            <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
              <el-button
                slot="append"
                icon="el-icon-thumb"
                @click="openIconsDialog('icon')"
              >
                选择
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-cascader'"
            label="选项分隔符"
          >
            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
          </el-form-item>
          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
            <el-input-number
              v-model="activeData.autosize.minRows"
              :min="1"
              placeholder="最小行数"
            />
          </el-form-item>
          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
            <el-input-number
              v-model="activeData.autosize.maxRows"
              :min="1"
              placeholder="最大行数"
            />
          </el-form-item>
          <el-form-item v-if="isShowMin" label="最小值">
            <el-input-number v-model="activeData.min" placeholder="最小值" />
          </el-form-item>
          <el-form-item v-if="isShowMax" label="最大值">
            <el-input-number v-model="activeData.max" placeholder="最大值" />
          </el-form-item>
          <el-form-item v-if="activeData.height !== undefined" label="组件高度">
            <el-input-number
              v-model="activeData.height"
              placeholder="高度"
              @input="changeRenderKey"
            />
          </el-form-item>
          <el-form-item v-if="isShowStep" label="步长">
            <el-input-number v-model="activeData.step" placeholder="步数" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-input-number'"
            label="精度"
          >
            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-input-number'"
            label="按钮位置"
          >
            <el-radio-group v-model="activeData['controls-position']">
              <el-radio-button label=""> 默认 </el-radio-button>
              <el-radio-button label="right"> 右侧 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
            <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
              <template slot="append"> 个字符 </template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
            <el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
            <el-input
              v-model="activeData['inactive-text']"
              placeholder="请输入关闭提示"
            />
          </el-form-item>
          <el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
            <el-input
              :value="setDefaultValue(activeData['active-value'])"
              placeholder="请输入开启值"
              @input="onSwitchValueInput($event, 'active-value')"
            />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
            <el-input
              :value="setDefaultValue(activeData['inactive-value'])"
              placeholder="请输入关闭值"
              @input="onSwitchValueInput($event, 'inactive-value')"
            />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.type !== undefined &&
              'el-date-picker' === activeData.__config__.tag
            "
            label="时间类型"
          >
            <el-select
              v-model="activeData.type"
              placeholder="请选择时间类型"
              :style="{ width: '100%' }"
              @change="dateTypeChange"
            >
              <el-option
                v-for="(item, index) in dateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              activeData.type !== undefined &&
              'sz-date-picker' === activeData.__config__.tag
            "
            label="时间类型"
          >
            <el-select
              v-model="activeData.type"
              placeholder="请选择时间类型"
              :style="{ width: '100%' }"
              @change="dateTypeChange"
            >
              <el-option
                v-for="(item, index) in mobileDateTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
            <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
          </el-form-item>
          <el-form-item v-if="activeData.accept !== undefined" label="文件类型">
            <el-select
              v-model="activeData.accept"
              placeholder="请选择文件类型"
              :style="{ width: '100%' }"
              clearable
            >
              <el-option label="图片" value="image/*" />
              <el-option label="视频" value="video/*" />
              <el-option label="音频" value="audio/*" />
              <el-option label="excel" value=".xls,.xlsx" />
              <el-option label="word" value=".doc,.docx" />
              <el-option label="pdf" value=".pdf" />
              <el-option label="txt" value=".txt" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.fileSize !== undefined"
            label="文件大小"
          >
            <el-input
              v-model.number="activeData.__config__.fileSize"
              placeholder="请输入文件大小"
            >
              <el-select
                slot="append"
                v-model="activeData.__config__.sizeUnit"
                :style="{ width: '66px' }"
              >
                <el-option label="KB" value="KB" />
                <el-option label="MB" value="MB" />
                <el-option label="GB" value="GB" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item v-if="activeData.action !== undefined" label="上传地址">
            <el-input
              v-model="activeData.action"
              placeholder="请输入上传地址"
              clearable
            />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'sz-select' ||
              activeData.__config__.tag === 'sz-mobile-select'
            "
            label="数据方法"
          >
            <el-input
              v-model="activeData.optionMethod"
              placeholder="请输入方法名称/数据字典key"
            />
          </el-form-item>
          <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
            <el-radio-group v-model="activeData['list-type']" size="small">
              <el-radio-button label="text"> text </el-radio-button>
              <el-radio-button label="picture"> picture </el-radio-button>
              <el-radio-button label="picture-card"> picture-card </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="
              activeData.type !== undefined && activeData.__config__.tag === 'el-button'
            "
            label="按钮类型"
          >
            <el-select v-model="activeData.type" :style="{ width: '100%' }">
              <el-option label="primary" value="primary" />
              <el-option label="success" value="success" />
              <el-option label="warning" value="warning" />
              <el-option label="danger" value="danger" />
              <el-option label="info" value="info" />
              <el-option label="text" value="text" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.buttonText !== undefined"
            v-show="'picture-card' !== activeData['list-type']"
            label="按钮文字"
          >
            <el-input
              v-model="activeData.__config__.buttonText"
              placeholder="请输入按钮文字"
            />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-button'" label="按钮文字">
            <el-input
              v-model="activeData.__slot__.default"
              placeholder="请输入按钮文字"
            />
          </el-form-item>
          <el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
            <el-input
              v-model="activeData['range-separator']"
              placeholder="请输入分隔符"
            />
          </el-form-item>
          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
            <el-input
              v-model="activeData['picker-options'].selectableRange"
              placeholder="请输入时间段"
            />
          </el-form-item>
          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
            <el-input
              :value="activeData.format"
              placeholder="请输入时间格式"
              @input="setTimeValue($event)"
            />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.format !== undefined"
            label="时间格式"
          >
            <el-input
              v-model="activeData.__config__.format"
              placeholder="请输入时间格式"
            />
          </el-form-item>
          <template v-if="['labelInput'].indexOf(activeData.__config__.layout) > -1">
            <el-divider>选项</el-divider>
            <draggable
              :list="activeData.__config__.items"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <div v-for="(item, index) in activeData.__config__.items" :key="index">
                <div
                  v-if="item.type === 'label'"
                  style="
                    border-bottom: 1px solid #cececd;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                  "
                  class="select-item"
                >
                  <template>
                    <el-input v-model="item.type" placeholder="类型" size="small" />
                    <el-input
                      placeholder="文本"
                      size="small"
                      label="文本"
                      v-model="item.text"
                    />
                    <el-input placeholder="颜色" size="small" v-model="item.color" />
                    <div
                      class="close-btn select-line-icon"
                      @click="activeData.__config__.items.splice(index, 1)"
                    >
                      <i class="el-icon-remove-outline" />
                    </div>
                  </template>
                </div>

                <div
                  v-if="item.type === 'input'"
                  style="
                    border-bottom: 1px solid #cececd;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                  "
                >
                  <div class="select-item">
                    <template v-if="item.type === 'input'">
                      <el-input v-model="item.type" placeholder="类型" size="small" />
                      <el-input
                        placeholder="绑定字段"
                        size="small"
                        v-model="item.__vModel__"
                      />
                      <el-input
                        placeholder="提示"
                        size="small"
                        v-model="item.placeholder"
                      />
                      <el-input placeholder="宽度" size="small" v-model="item.width" />
                    </template>
                  </div>
                  <div class="select-item">
                    <el-input placeholder="对齐" size="small" v-model="item.align" />
                    <el-input
                      placeholder="默认值"
                      size="small"
                      v-model="item.defaultValue"
                    />
                    <div
                      class="close-btn select-line-icon"
                      @click="activeData.__config__.items.splice(index, 1)"
                    >
                      <i class="el-icon-remove-outline" />
                    </div>
                  </div>
                </div>
                <div
                  v-if="item.type === 'date' || item.type === 'datetime'"
                  style="
                    border-bottom: 1px solid #cececd;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                  "
                >
                  <div class="select-item">
                    <el-input v-model="item.type" placeholder="类型" size="small" />
                    <el-input
                      placeholder="绑定字段"
                      size="small"
                      v-model="item.__vModel__"
                    />
                    <el-input placeholder="宽度" size="small" v-model="item.width" />
                  </div>
                  <div class="select-item">
                    <el-input
                      placeholder="提示"
                      size="small"
                      v-model="item.placeholder"
                    />
                    <el-input
                      placeholder="默认值"
                      size="small"
                      v-model="item.defaultValue"
                    />
                  </div>
                  <div class="select-item">
                    <el-input placeholder="格式化" size="small" v-model="item.format" />
                    <div
                      class="close-btn select-line-icon"
                      @click="activeData.__config__.items.splice(index, 1)"
                    >
                      <i class="el-icon-remove-outline" />
                    </div>
                  </div>
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addInputItem"
              >
                添加Input
              </el-button>
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addDateItem"
              >
                添加日期
              </el-button>
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addLabelItem"
              >
                添加Label
              </el-button>
            </div>
            <el-divider />
          </template>

          <template
            v-if="
              ['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(
                activeData.__config__.tag
              ) > -1
            "
          >
            <el-divider>选项</el-divider>
            <draggable
              :list="activeData.__slot__.options"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <div
                v-for="(item, index) in activeData.__slot__.options"
                :key="index"
                class="select-item"
              >
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input v-model="item.label" placeholder="选项名" size="small" />
                <el-input
                  placeholder="选项值"
                  size="small"
                  :value="item.value"
                  @input="setOptionValue(item, $event)"
                />
                <div
                  class="close-btn select-line-icon"
                  @click="activeData.__slot__.options.splice(index, 1)"
                >
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >
                添加选项
              </el-button>
            </div>
            <el-divider />
          </template>

          <template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
            <el-divider>选项</el-divider>
            <el-form-item label="数据类型">
              <el-radio-group v-model="activeData.__config__.dataType" size="small">
                <el-radio-button label="dynamic"> 动态数据 </el-radio-button>
                <el-radio-button label="static"> 静态数据 </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <template v-if="activeData.__config__.dataType === 'dynamic'">
              <el-form-item label="标签键名">
                <el-input
                  v-model="activeData.props.props.label"
                  placeholder="请输入标签键名"
                />
              </el-form-item>
              <el-form-item label="值键名">
                <el-input
                  v-model="activeData.props.props.value"
                  placeholder="请输入值键名"
                />
              </el-form-item>
              <el-form-item label="子级键名">
                <el-input
                  v-model="activeData.props.props.children"
                  placeholder="请输入子级键名"
                />
              </el-form-item>
            </template>

            <!-- 级联选择静态树 -->
            <el-tree
              v-if="activeData.__config__.dataType === 'static'"
              draggable
              :data="activeData.options"
              node-key="id"
              :expand-on-click-node="false"
              :render-content="renderContent"
            />
            <div
              v-if="activeData.__config__.dataType === 'static'"
              style="margin-left: 20px"
            >
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addTreeItem"
              >
                添加父级
              </el-button>
            </div>
            <el-divider />
          </template>
          <template
            v-if="
              ['sz-select'].indexOf(activeData.__config__.tag) > -1 ||
              ['sz-mobile-select'].indexOf(activeData.__config__.tag) > -1
            "
          >
            <el-divider>选项</el-divider>
            <el-form-item label="数据类型">
              <el-radio-group v-model="activeData.__config__.dataType" size="small">
                <el-radio-button label="dynamic"> 动态数据 </el-radio-button>
                <el-radio-button label="static"> 静态数据 </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <template v-if="activeData.__config__.dataType === 'dynamic'">
              <el-form-item label="标签键名">
                <el-input
                  v-model="activeData.props.props.label"
                  placeholder="请输入标签键名"
                />
              </el-form-item>
              <el-form-item label="值键名">
                <el-input
                  v-model="activeData.props.props.value"
                  placeholder="请输入值键名"
                />
              </el-form-item>
            </template>

            <!-- 级联选择静态树 -->
            <draggable
              :list="activeData.__slot__.options"
              :animation="340"
              v-if="activeData.__config__.dataType === 'static'"
              group="selectItem"
              handle=".option-drag"
            >
              <div
                v-for="(item, index) in activeData.__slot__.options"
                :key="index"
                class="select-item"
              >
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input v-model="item.label" placeholder="选项名" size="small" />
                <el-input
                  placeholder="选项值"
                  size="small"
                  :value="item.value"
                  @input="setOptionValue(item, $event)"
                />
                <div
                  class="close-btn select-line-icon"
                  @click="activeData.__slot__.options.splice(index, 1)"
                >
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
            </draggable>
            <div
              style="margin-left: 20px"
              v-if="activeData.__config__.dataType === 'static'"
            >
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >
                添加选项
              </el-button>
            </div>
            <el-divider />
          </template>

          <el-form-item
            v-if="activeData.__config__.optionType !== undefined"
            label="选项样式"
          >
            <el-radio-group v-model="activeData.__config__.optionType">
              <el-radio-button label="default"> 默认 </el-radio-button>
              <el-radio-button label="button"> 按钮 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
            <el-color-picker v-model="activeData['active-color']" />
          </el-form-item>
          <el-form-item
            v-if="activeData['inactive-color'] !== undefined"
            label="关闭颜色"
          >
            <el-color-picker v-model="activeData['inactive-color']" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.showLabel !== undefined &&
              activeData.__config__.labelWidth !== undefined
            "
            label="显示标签"
          >
            <el-switch v-model="activeData.__config__.showLabel" />
          </el-form-item>
          <el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
            <el-switch v-model="activeData.branding" @input="changeRenderKey" />
          </el-form-item>
          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
            <el-switch v-model="activeData['allow-half']" />
          </el-form-item>
          <el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
            <el-switch v-model="activeData['show-text']" @change="rateTextChange" />
          </el-form-item>
          <el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
            <el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
          </el-form-item>
          <el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
            <el-switch v-model="activeData['show-stops']" />
          </el-form-item>
          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
            <el-switch v-model="activeData.range" @change="rangeChange" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.border !== undefined &&
              activeData.__config__.optionType === 'default'
            "
            label="是否带边框"
          >
            <el-switch v-model="activeData.__config__.border" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-color-picker'"
            label="颜色格式"
          >
            <el-select
              v-model="activeData['color-format']"
              placeholder="请选择颜色格式"
              :style="{ width: '100%' }"
              clearable
              @change="colorFormatChange"
            >
              <el-option
                v-for="(item, index) in colorFormatOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              activeData.size !== undefined &&
              (activeData.__config__.optionType === 'button' ||
                activeData.__config__.border ||
                activeData.__config__.tag === 'el-color-picker' ||
                activeData.__config__.tag === 'el-button')
            "
            label="组件尺寸"
          >
            <el-radio-group v-model="activeData.size">
              <el-radio-button label="medium"> 中等 </el-radio-button>
              <el-radio-button label="small"> 较小 </el-radio-button>
              <el-radio-button label="mini"> 迷你 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.__config__.text != undefined" label="文本">
            <el-input v-model="activeData.__config__.text" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.style != undefined" label="样式style">
            <el-input type="textarea" autosize v-model="activeData.__config__.style" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.signAlign !== undefined"
            label="签名对齐"
          >
            <el-input v-model="activeData.__config__.signAlign"></el-input>
          </el-form-item>
          <el-form-item
            v-if="activeData['show-word-limit'] !== undefined"
            label="输入统计"
          >
            <el-switch v-model="activeData['show-word-limit']" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-input-number'"
            label="严格步数"
          >
            <el-switch v-model="activeData['step-strictly']" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-cascader'"
            label="是否多选"
          >
            <el-switch v-model="activeData.props.props.multiple" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-cascader'"
            label="展示全路径"
          >
            <el-switch v-model="activeData['show-all-levels']" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.tag === 'el-cascader'"
            label="可否筛选"
          >
            <el-switch v-model="activeData.filterable" />
          </el-form-item>
          <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
            <el-switch v-model="activeData.clearable" />
          </el-form-item>
          <el-form-item v-if="activeData.isDic !== undefined" label="来自字典">
            <el-switch v-model="activeData.isDic" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.showTip !== undefined"
            label="显示提示"
          >
            <el-switch v-model="activeData.__config__.showTip" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
            <el-switch v-model="activeData.multiple" />
          </el-form-item>
          <el-form-item v-if="activeData.isMulSelect !== undefined" label="是否多选">
            <el-switch v-model="activeData.isMulSelect" />
          </el-form-item>
          <el-form-item v-if="activeData.waterMark !== undefined" label="显示水印">
            <el-switch v-model="activeData.waterMark" />
          </el-form-item>
          <el-form-item v-if="activeData.waterText !== undefined" label="水印内容">
            <el-input v-model="activeData.waterText" placeholder="请输入水印内容" />
          </el-form-item>
          <el-form-item v-if="activeData.isLabel !== undefined" label="添加标签">
            <el-switch v-model="activeData.isLabel" />
          </el-form-item>
          <el-form-item v-if="activeData.labelText !== undefined" label="标签内容">
            <el-input v-model="activeData.labelText" placeholder="请输入标签内容" />
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="activeData.labelX !== undefined" label="X坐标">
                <el-input v-model="activeData.labelX" placeholder="X坐标" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="activeData.labelY !== undefined" label="Y坐标">
                <el-input v-model="activeData.labelY" placeholder="Y坐标" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            v-if="activeData.isHiddenInput !== undefined"
            label="是否隐藏输入框"
          >
            <el-switch v-model="activeData.isHiddenInput" />
          </el-form-item>
          <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
            <el-switch v-model="activeData['auto-upload']" />
          </el-form-item>
          <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
            <el-switch v-model="activeData.readonly" />
          </el-form-item>
          <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
            <el-switch v-model="activeData.disabled" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'el-select' &&
              activeData.__config__.tag === 'sz-select' &&
              activeData.__config__.tag === 'sz-mobile-select'
            "
            label="能否搜索"
          >
            <el-switch v-model="activeData.filterable" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'el-select' &&
              activeData.__config__.tag === 'sz-select' &&
              activeData.__config__.tag === 'sz-mobile-select'
            "
            label="是否多选"
          >
            <el-switch v-model="activeData.multiple" @change="multipleChange" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.required !== undefined"
            label="是否必填"
          >
            <el-switch v-model="activeData.__config__.required" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.isMerge !== undefined"
            label="合并数据"
          >
            <el-switch v-model="activeData.__config__.isMerge" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.addDate !== undefined"
            label="追加时间"
          >
            <el-switch v-model="activeData.__config__.addDate" />
          </el-form-item>
          <template
            v-if="
              activeData.__config__.tag === 'sz-tag-input' ||
              activeData.__config__.tag === 'tag-input'
            "
          >
            <el-form-item label="显示签名">
              <el-switch v-model="activeData.__config__.showSign" />
            </el-form-item>
            <el-form-item label="显示时间">
              <el-switch v-model="activeData.__config__.showDate" />
            </el-form-item>
            <el-form-item label="连续签名">
              <el-switch v-model="activeData.__config__.continuitySign" />
            </el-form-item>
            <el-form-item label="是否可编辑之前的签名">
              <el-switch v-model="activeData.__config__.editOldSign" />
            </el-form-item>
            <el-form-item label="同一用户是否可重复签名">
              <el-switch v-model="activeData.__config__.allowRepeat" />
            </el-form-item>
            <el-form-item label="文本+签名是否在一行">
              <el-switch v-model="activeData.__config__.signInline" />
            </el-form-item>
            <el-form-item label="签名图片最小宽高">
              <el-input v-model="activeData.__config__.signMinSize" type="number" />
            </el-form-item>
            <el-form-item label="签名图片最大宽高">
              <el-input v-model="activeData.__config__.signMaxSize" type="number" />
            </el-form-item>
          </template>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'tag-input' ||
              activeData.__config__.tag === 'sz-tag-input'
            "
            label="显示文本"
          >
            <el-switch v-model="activeData.__config__.showText" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'tag-input' ||
              activeData.__config__.tag === 'sz-tag-input'
            "
            label="追加签名"
          >
            <el-switch v-model="activeData.__config__.addSign" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'tag-input' ||
              activeData.__config__.tag === 'sz-tag-input'
            "
            label="编辑签名"
          >
            <el-switch v-model="activeData.__config__.editSign" />
          </el-form-item>
          <el-form-item
            v-if="
              activeData.__config__.tag === 'tag-input' ||
              activeData.__config__.tag === 'sz-tag-input'
            "
            label="编辑时间"
          >
            <el-switch v-model="activeData.__config__.editSignTime" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.showSignButton !== undefined"
            label="签名按钮"
          >
            <el-switch v-model="activeData.__config__.showSignButton" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.showAcceptButton !== undefined"
            label="同意按钮"
          >
            <el-switch v-model="activeData.__config__.showAcceptButton" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.showRejectButton !== undefined"
            label="不同意按钮"
          >
            <el-switch v-model="activeData.__config__.showRejectButton" />
          </el-form-item>
          <el-form-item
            v-if="activeData.__config__.showCancelButton !== undefined"
            label="取消按钮"
          >
            <el-switch v-model="activeData.__config__.showCancelButton" />
          </el-form-item>
          <template v-if="activeData.__config__.layoutTree">
            <el-divider>布局结构树</el-divider>
            <el-tree
              :data="[activeData.__config__]"
              :props="layoutTreeProps"
              node-key="renderKey"
              default-expand-all
              draggable
            >
              <span slot-scope="{ node, data }">
                <span class="node-label">
                  <svg-icon
                    class="node-icon"
                    :icon-class="data.__config__ ? data.__config__.tagIcon : data.tagIcon"
                  />
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </template>
          <el-form-item
            v-if="activeData.__config__.jsClass !== undefined"
            label="脚本类名"
          >
            <el-input v-model="activeData.__config__.jsClass" />
          </el-form-item>
          <template v-if="Array.isArray(activeData.__config__.regList)">
            <el-divider>正则校验</el-divider>
            <el-form-item
              v-if="activeData.__config__.regBefore !== undefined"
              label="前置条件"
            >
              <el-input v-model="activeData.__config__.regBefore" />
            </el-form-item>
            <div
              v-for="(item, index) in activeData.__config__.regList"
              :key="index"
              class="reg-item"
            >
              <span
                class="close-btn"
                @click="activeData.__config__.regList.splice(index, 1)"
              >
                <i class="el-icon-close" />
              </span>
              <el-form-item label="表达式">
                <el-input v-model="item.pattern" placeholder="请输入正则" />
              </el-form-item>
              <el-form-item label="错误提示" style="margin-bottom: 0">
                <el-input v-model="item.message" placeholder="请输入错误提示" />
              </el-form-item>
            </div>
            <div style="margin-left: 20px">
              <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
                添加规则
              </el-button>
            </div>
          </template>
        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
          <el-form-item label="表单名">
            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
          </el-form-item>
          <el-form-item label="表单名称">
            <el-input v-model="formConf.name" placeholder="请输入表单名称" />
          </el-form-item>
          <el-form-item label="表单分类">
            <el-select v-model="formConf.type" class="item_width">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left" v-if="item.deep === 1">{{ item.name }}</span>
                <span :style="deepStyle(item)" v-else>┝{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库表名">
            <el-select
              v-model="formConf.tableName"
              placeholder="请选择"
              clearable
              @change="tableChange"
              class="item_width"
            >
              <el-option
                v-for="item in tables"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主键">
            <el-select
              v-model="formConf.tablePk"
              placeholder="请选择"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题字段">
            <el-select
              v-model="formConf.tableTitleField"
              placeholder="如果设置了标题表达式，任务标题会取标题表达式"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题表达式">
            <el-input
              type="textarea"
              autosize
              v-model="formConf.tableTitleExpression"
              placeholder="请输入标题表达式"
            />
          </el-form-item>
          <el-form-item label="自动生成任务标题">
            <el-switch v-model="formConf.autoTitle" />
          </el-form-item>
          <el-form-item label="表单模型">
            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
          </el-form-item>
          <el-form-item label="校验模型">
            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
          </el-form-item>
          <el-form-item label="设计类型">
            <el-radio-group v-model="formConf.formType">
              <el-radio-button label="form"> 表单 </el-radio-button>
              <el-radio-button label="table"> 表格 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="表单尺寸">
            <el-radio-group v-model="formConf.size">
              <el-radio-button label="medium"> 中等 </el-radio-button>
              <el-radio-button label="small"> 较小 </el-radio-button>
              <el-radio-button label="mini"> 迷你 </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="formConf.labelPosition">
              <el-radio-button label="left"> 左对齐 </el-radio-button>
              <el-radio-button label="right"> 右对齐 </el-radio-button>
              <el-radio-button label="top"> 顶部对齐 </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="标签宽度">
            <el-input
              v-model.number="formConf.labelWidth"
              type="number"
              placeholder="请输入标签宽度"
            />
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
          </el-form-item>
          <el-form-item label="禁用表单">
            <el-switch v-model="formConf.disabled" />
          </el-form-item>
          <el-form-item label="表单按钮">
            <el-switch v-model="formConf.formBtns" />
          </el-form-item>
          <el-form-item label="显示未选中组件边框">
            <el-switch v-model="formConf.unFocusedComponentBorder" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>

    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
    <icons-dialog
      :visible.sync="iconsVisible"
      :current="activeData[currentIconModel]"
      @select="setIcon"
    />
  </div>
</template>

<script>
import { isArray } from "util";
import TreeNodeDialog from "@/components/form-designer/TreeNodeDialog";
import { isNumberStr } from "@/components/form-designer/utils/index";
import IconsDialog from "./IconsDialog";
import {
  inputComponents,
  selectComponents,
  layoutComponents,
} from "@/components/form-designer/generator/config";
import { saveFormConf } from "@/components/form-designer/utils/db";
import _ from "lodash";
const dateTimeFormat = {
  date: "yyyy-MM-dd",
  week: "yyyy 第 WW 周",
  month: "yyyy-MM",
  year: "yyyy",
  time: "HH:mm",
  datetime: "yyyy-MM-dd HH:mm:ss",
  noMinute: "yyyy-MM-dd HH",
  daterange: "yyyy-MM-dd",
  monthrange: "yyyy-MM",
  datetimerange: "yyyy-MM-dd HH:mm:ss",
};

// 使changeRenderKey在目标组件改变时可用
const needRerenderList = ["tinymce"];

export default {
  components: {
    TreeNodeDialog,
    IconsDialog,
  },
  props: ["showField", "activeData", "formConf"],
  data() {
    return {
      ddatae: "2020-01-10 10:40",
      tagTypes: [
        { name: "文本", key: "text_sign" },
        { name: "手写", key: "hand_sign" },
        { name: "拍照", key: "photo" },
        { name: "模板", key: "template" },
        { name: "文本+签名", key: "text_and_sign" },
      ],
      categoryProps: {
        checkStrictly: true,
        label: "name",
        value: "id",
      },
      categoryList: [], //表单分类
      tables: [], // 数据库表名称
      titleFields: [], //数据库字段
      currentTab: "field",
      currentNode: null,
      dialogVisible: false,
      iconsVisible: false,
      currentIconModel: null,
      dateTypeOptions: [
        {
          label: "日(date)",
          value: "date",
        },
        {
          label: "周(week)",
          value: "week",
        },
        {
          label: "月(month)",
          value: "month",
        },
        {
          label: "年(year)",
          value: "year",
        },
        {
          label: "日期时间(datetime)",
          value: "datetime",
        },
      ],
      mobileDateTypeOptions: [
        {
          label: "日期(date)",
          value: "date",
        },
        {
          label: "时间(time)",
          value: "time",
        },
        {
          label: "日期时间(datetime)",
          value: "datetime",
        },
        {
          label: "日期时(noMinute)",
          value: "noMinute",
        },
      ],
      dateRangeTypeOptions: [
        {
          label: "日期范围(daterange)",
          value: "daterange",
        },
        {
          label: "月范围(monthrange)",
          value: "monthrange",
        },
        {
          label: "日期时间范围(datetimerange)",
          value: "datetimerange",
        },
      ],
      colorFormatOptions: [
        {
          label: "hex",
          value: "hex",
        },
        {
          label: "rgb",
          value: "rgb",
        },
        {
          label: "rgba",
          value: "rgba",
        },
        {
          label: "hsv",
          value: "hsv",
        },
        {
          label: "hsl",
          value: "hsl",
        },
      ],
      justifyOptions: [
        {
          label: "start",
          value: "start",
        },
        {
          label: "end",
          value: "end",
        },
        {
          label: "center",
          value: "center",
        },
        {
          label: "space-around",
          value: "space-around",
        },
        {
          label: "space-between",
          value: "space-between",
        },
      ],
      layoutTreeProps: {
        label(data, node) {
          const config = data.__config__;
          return data.componentName || `${config.label}: ${data.__vModel__}`;
        },
      },
    };
  },
  computed: {
    documentLink() {
      return (
        this.activeData.__config__.document ||
        "https://element.eleme.cn/#/zh-CN/component/installation"
      );
    },
    dateOptions() {
      if (
        this.activeData.type !== undefined &&
        this.activeData.__config__.tag === "el-date-picker"
      ) {
        if (this.activeData["start-placeholder"] === undefined) {
          return this.dateTypeOptions;
        }
        return this.dateRangeTypeOptions;
      }
      return [];
    },
    tagList() {
      return [
        {
          label: "输入型组件",
          options: inputComponents,
        },
        {
          label: "选择型组件",
          options: selectComponents,
        },
      ];
    },
    // 上次选择的签名类型
    oldTagTypes() {
      return _.clone(this.activeData.__config__.tagType);
    },
    activeTag() {
      return this.activeData.__config__.tag;
    },
    isShowMin() {
      return ["el-input-number", "el-slider"].indexOf(this.activeTag) > -1;
    },
    isShowMax() {
      return ["el-input-number", "el-slider", "el-rate"].indexOf(this.activeTag) > -1;
    },
    isShowStep() {
      return ["el-input-number", "el-slider"].indexOf(this.activeTag) > -1;
    },
  },
  watch: {
    formConf: {
      handler(val) {
        saveFormConf(val);
      },
      deep: true,
    },

    "formConf.tableName"(val) {
      if (val) {
        this.tableChange(val);
      }
    },
  },
  mounted() {
    this.getCategoryTree();
    this.getWorkFlowTable();
  },
  methods: {
    // 签名类型选择事件
    handleCheckedTagTypeChange(value) {
      // var tagIndex = value.findIndex((v, index, arr) => {
      //   return v==='text_sign'
      // })
      // if (tagIndex===value.length-1){
      //   // 当前被选中是文本
      //   this.activeData.__config__.tagType =['text_sign']
      // }else {
      //   if (tagIndex!==-1){
      //     this.activeData.__config__.tagType.splice(tagIndex,1)
      //   }
      // }
    },
    deepStyle(item) {
      return "margin-left:" + item.deep * 3 + "px";
    },

    // 设置分类的深度    // 获取表单类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "FORM", parentId: 0 }).then((res) => {
        if (res.data) {
          console.log(res.data, 11);
          this.categoryList = [];
          let tem = this.setCategoryDeep(res.data, 1);
          console.log(tem);
        }
      });
    },
    setCategoryDeep(data, deep) {
      console.log(data, deep);
      data.map((item) => {
        item.deep = deep;
        let nextDeep = deep + 1;
        this.categoryList.push(item);
        if (item.children) {
          item.children = this.setCategoryDeep(item.children, nextDeep);
        }
      });
      return data;
    },
    // 获取流程数据库字段
    tableChange(val) {
      this.API.getWorkflowTableFieldList({ tableName: val }).then((res) => {
        this.titleFields = res.data;
      });
    },
    // 获取流程数据库表
    getWorkFlowTable() {
      this.API.getWorkflowTableList().then((res) => {
        this.tables = res.data;
      });
    },
    addReg() {
      this.activeData.__config__.regList.push({
        pattern: "",
        message: "",
      });
    },
    addSelectItem() {
      this.activeData.__slot__.options.push({
        label: "",
        value: "",
      });
    },
    addInputItem() {
      this.activeData.__config__.items.push({
        type: "input",
        placeholder: "",
        __vModel__: "filed1",
        width: "100px",
        align: "center",
        defaultValue: "",
        readonly: false,
        disabled: false,
        required: false,
        regList: [],
        tag: "el-input",
      });
    },
    addDateItem() {
      this.activeData.__config__.items.push({
        type: "date",
        placeholder: "",
        __vModel__: "date1",
        width: "120px",
        align: "center",
        defaultValue: "",
        format: "yyyy-MM-dd",
        readonly: false,
        disabled: false,
        required: false,
        regList: [],
        tag: "el-date-picker",
      });
    },
    addLabelItem() {
      this.activeData.__config__.items.push({
        type: "label",
        text: "〔",
        color: "red",
      });
    },

    addTreeItem() {
      ++this.idGlobal;
      this.dialogVisible = true;
      this.currentNode = this.activeData.options;
    },
    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          <span> {node.label} </span>
          <span class="node-operation">
            <i on-click={() => this.append(data)} class="el-icon-plus" title="添加">
              {" "}
            </i>
            <i
              on-click={() => this.remove(node, data)}
              class="el-icon-delete"
              title="删除"
            >
              {" "}
            </i>
          </span>
        </div>
      );
    },
    append(data) {
      if (!data.children) {
        this.$set(data, "children", []);
      }
      this.dialogVisible = true;
      this.currentNode = data.children;
    },
    remove(node, data) {
      this.activeData.__config__.defaultValue = []; // 避免删除时报错
      const { parent } = node;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    addNode(data) {
      this.currentNode.push(data);
    },
    setOptionValue(item, val) {
      item.value = val;
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(",");
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof val === "boolean") {
        return `${val}`;
      }
      return val;
    },
    onDefaultValueInput(str) {
      if (isArray(this.activeData.__config__.defaultValue)) {
        // 数组
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          str.split(",").map((val) => (isNumberStr(val) ? +val : val))
        );
      } else if (["true", "false"].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData.__config__, "defaultValue", JSON.parse(str));
      } else {
        // 字符串和数字
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          isNumberStr(str) ? +str : str
        );
      }
    },
    onSwitchValueInput(val, name) {
      if (["true", "false"].indexOf(val) > -1) {
        this.$set(this.activeData, name, JSON.parse(val));
      } else {
        this.$set(this.activeData, name, isNumberStr(val) ? +val : val);
      }
    },
    setTimeValue(val, type) {
      const valueFormat = type === "week" ? dateTimeFormat.date : val;
      this.$set(this.activeData.__config__, "defaultValue", null);
      this.$set(this.activeData, "value-format", valueFormat);
      this.$set(this.activeData, "format", val);
    },
    spanChange(val) {
      this.formConf.span = val;
    },
    multipleChange(val) {
      this.$set(this.activeData.__config__, "defaultValue", val ? [] : "");
    },
    dateTypeChange(val) {
      this.setTimeValue(dateTimeFormat[val], val);
    },
    rangeChange(val) {
      this.$set(
        this.activeData.__config__,
        "defaultValue",
        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
      );
    },
    rateTextChange(val) {
      if (val) this.activeData["show-score"] = false;
    },
    rateScoreChange(val) {
      if (val) this.activeData["show-text"] = false;
    },
    colorFormatChange(val) {
      this.activeData.__config__.defaultValue = null;
      this.activeData["show-alpha"] = val.indexOf("a") > -1;
      this.activeData.__config__.renderKey = +new Date(); // 更新renderKey,重新渲染该组件
    },
    openIconsDialog(model) {
      this.iconsVisible = true;
      this.currentIconModel = model;
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val;
    },
    tagChange(tagIcon) {
      let target = inputComponents.find((item) => item.__config__.tagIcon === tagIcon);
      if (!target)
        target = selectComponents.find((item) => item.__config__.tagIcon === tagIcon);

      this.$emit("tag-change", target);
    },
    changeRenderKey() {
      if (needRerenderList.includes(this.activeData.__config__.tag)) {
        this.activeData.__config__.renderKey = +new Date();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;

  .field-box {
    position: relative;
    height: calc(100vh - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .el-scrollbar {
    height: 100%;
  }
}

.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item-input {
  display: table;
  border: 1px dashed #fff;
  box-sizing: border-box;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.option-drag {
  cursor: move;
}

.time-range {
  .el-date-editor {
    width: 227px;
  }

  ::v-deep .el-icon-time {
    display: none;
  }
}

.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}

.node-label {
  font-size: 14px;
}

.node-icon {
  color: #bebfc3;
}

.item_tip {
  line-height: 1px !important;
  font-size: 12px;
  color: red;
}
</style>
